<template>
  <div class="loading">
    <div class="DeviceManagement">
      <div class="searchBox">
        <div>
          <div class="searchBoxTitle">选择类型</div>
          <el-input class="search1"
                    placeholder="请输入账号"
                    v-model="tableQuery.zhSearch"></el-input>
        </div>
        <div>
          <div class="searchBoxTitle">选择类型</div>
          <el-input class="search1"
                    placeholder="请输入推荐人"
                    v-model="tableQuery.tjrSearch"></el-input>
        </div>
        <div class="newButton"
             @click="search()">搜索</div>
        <div class="newButton"
             @click="addStrongData()">强电配置</div>
        <div class="newButton"
             @click="addFeebleData()">弱电配置</div>
        <div class="newButton"
             @click="addData()">添加设备</div>
        <div class="newButton"
             @click="allBind()">全部绑定</div>
        <div class="newButton"
             @click="allUnBind()">全部解绑</div>
        <div class="newButton"
             @click="allDelete()">全部删除</div>
      </div>
      <div class="tableBox">
        <el-table v-loading="loading"
                  :data="dataFilter(tableData)"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55"></el-table-column>
          <el-table-column label="序号"
                           width="120">
            <template slot-scope="scope">{{(scope.$index + 1) + ((page - 1) * size)}}</template>
          </el-table-column>
          <el-table-column prop="Device_ID"
                           label="设备ID"
                           min-width="180">
            <template slot-scope="scope">
              <span title="点击编辑"
                    style="cursor:pointer"
                    @click="editData(scope)">{{scope.row.Device_ID}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Device_Name"
                           label="设备名称"
                           width="180"></el-table-column>
          <el-table-column prop="Name"
                           label="归属人"
                           width="180"></el-table-column>
          <el-table-column prop="State"
                           label="状态"
                           width="180"></el-table-column>
          <el-table-column sortable
                           prop="OperatorName"
                           label="操作人"
                           width="180"></el-table-column>
          <el-table-column prop="ServerDevice_ID"
                           label="服务器ID"
                           width="180"></el-table-column>
          <el-table-column prop="ServerIP"
                           label="服务器IP"
                           width="180"></el-table-column>
          <el-table-column prop="ServerPort"
                           label="服务器端口号"
                           width="180"></el-table-column>
          <el-table-column prop="Type"
                           label="设备类型"
                           width="180"></el-table-column>
          <el-table-column prop="ProjectName"
                           label="工程名"
                           width="180"></el-table-column>
          <el-table-column prop="Category"
                           label="Category"
                           width="180"></el-table-column>
          <el-table-column prop="GroupName"
                           label="群组"
                           width="180"></el-table-column>
          <el-table-column prop="LastBind.date"
                           label="最近绑定"
                           width="180"></el-table-column>
          <el-table-column prop="LastUnBind.date"
                           label="最近解绑"
                           width="180"></el-table-column>
          <el-table-column prop="BindState"
                           label="状态"
                           width="100">
            <template slot-scope="scope">
              <span title="状态"
                    v-if="scope.row.BindState == 0"
                    style="color:#e6a23c">解绑</span>
              <span title="状态"
                    v-if="scope.row.BindState == 1"
                    style="color:#67C23A">绑定</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="300"
                           label-class-name="table_column_title"
                           class-name="table_column_list">
            <template slot-scope="scope">
              <div class="newButtonSmall"
                   @click="editData(scope)">编辑</div>
              <span v-if="scope.row.BindState == 1">
                <div class="newButtonSmall"
                     @click="bindData(scope)">解绑</div>
              </span>
              <span v-if="scope.row.BindState == 0">
                <div class="newButtonSmall"
                     @click="bindData(scope)">绑定</div>
              </span>
              <span v-if="scope.row.BindState == 2">
                <!-- <div class="newButtonSmall"
                   @click="editData(scope)">损坏</div> -->
                <el-button size="small"
                           type="danger"
                           plain
                           disabled>损坏</el-button>
              </span>
              <div class="newButtonSmall"
                   @click="deleteData(scope)">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="page">
          <el-pagination background
                         @size-change="sizeChange"
                         @current-change="currentChange"
                         :current-page="page"
                         :page-sizes="sizes"
                         :page-size="size"
                         :layout="layout"
                         :total="tableData.length"></el-pagination>
        </div>
        <!--新增对话框1-->
        <el-dialog title="强电配置"
                   :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false"
                   :show-close="false"
                   width="90%">
          <StrongElectricity :allChicketList="allChicketList"
                             @cancel="cancel"></StrongElectricity>
        </el-dialog>
        <el-dialog title="弱电配置"
                   :visible.sync="dialogFormVisible2"
                   :close-on-click-modal="false"
                   :show-close="false"
                   width="1200px">
          <FeebleElectricity :allChicketList="allChicketList"
                             @cancel="cancel"></FeebleElectricity>
        </el-dialog>
        <el-dialog title="添加设备"
                   :visible.sync="dialogFormVisible3"
                   :close-on-click-modal="false"
                   :show-close="false"
                   width="400px">
          <div>
            <el-form ref="dataForm">
              <el-row :gutter="20">
                <el-col :span="4">
                  <div style="margin-bottom:10px">设备ID</div>
                  <div style="width: 300px;margin-bottom:20px">
                    <el-input placeholder="请输入设备ID"></el-input>
                  </div>
                  <div style="margin-bottom:10px;width: 200px;">设备名称</div>
                  <div style="width: 300px;margin-bottom:20px">
                    <el-input placeholder="请输入设备名称"></el-input>
                  </div>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div slot="footer"
               class="dialog-footer"
               align="center">
            <el-button type="primary"
                       @click="confirm()">修 改</el-button>
            <el-button @click="cancel()">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import * as sysTool from '../../../js/systemTool'
import * as cookie from '../../../js/cookie'
import StrongElectricity from './StrongElectricity/StrongElectricity'
import FeebleElectricity from './FeebleElectricity/FeebleElectricity'
export default {
  name: 'DeviceManagement',
  data () {
    return {
      loading: true,
      requestCatch: false,
      dialogFormVisible: false, // 强电配置
      dialogFormVisible2: false, // 弱点配置
      dialogFormVisible3: false, // 添加设备
      tableData: [], // 表格数据
      tableQuery: { // 模糊查询
        zhSearch: '',
        tjrSearch: ''
      },
      sizes: [10, 20, 50],
      layout: 'total, sizes, prev, pager, next, jumper',
      page: 1, // 按翻页
      size: 10, // 每页几条
      multipleSelection: [], // 勾选设备
      allChicket: [], // 勾选设备
      ip: '1.1.1.1',
      area: '北京市',
      brower: 'chrome',
      os: 'windows7',
      result: null,
      insertOfUpdate: '',
      insertOfUpdateTxt: '',
      insertOfUpdateUrl: '',
      allChicketList: []
    }
  },
  methods: {
    // 初始化获取数据
    init () {
      this.loading = true
      this.requestCatch = false
      this.getTableList()
    },
    // 展示所有信息
    getTableList () {
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'GetDevices',
        Name: username,
        Password: password,
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = '/api/device/devicemgr.php'
      this.axios.post(url, data2).then((res) => {
        var mycars = res.data.Data
        let num = 1
        if (mycars != null) {
          for (const item of mycars) {
            item.num = num++
          }
          this.tableData = mycars
        }
        setTimeout(() => {
          this.loading = false
          this.requestCatch = false
        }, 1.5 * 1000)
      })
    },
    search () {
      this.getTableList()
    },
    // 复选框内容
    handleSelectionChange (val) {
      this.allChicket = []
      this.multipleSelection = val
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.allChicket.push(this.multipleSelection[i].Device_ID)
      }
    },
    // 全部绑定
    allBind () {
      if (this.allChicket.length < 1) {
        this.$message.error('错误，请勾选您要绑定的账号！')
        return false
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'BindDevice',
        Name: username,
        Password: password,
        Device_ID: os,
        Platform: brower,
        Data: this.allChicket
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/device/devicemgr.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 全部解绑
    allUnBind () {
      if (this.allChicket.length < 1) {
        this.$message.error('错误，请勾选您要解绑的账号！')
        return false
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'UnbindDevice',
        Name: username,
        Password: password,
        Data: this.allChicket,
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/device/devicemgrweb.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      }, 2000)
    },
    // 全部删除
    allDelete () {
      if (this.allChicket.length < 1) {
        this.$message.error('请先选择要解绑的设备')
        return false
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'RemoveMemberWeb',
        Name: username,
        Password: password,
        Data: this.allChicket,
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 修改数据
    editData (scope) {
      this.dialogFormVisible = true
    },
    // 解除绑定
    bindData (scoped) {
      var state = scoped.row.BindState
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data
      if (state === 0) {
        data = {
          Method: 'BindDevice',
          Name: username,
          Password: password,
          Device_ID: os,
          Platform: brower,
          Data: [scoped.row.Device_ID]
        }
      } else if (state === 1) {
        data = {
          Method: 'UnbindDevice',
          Name: username,
          Password: password,
          Device_ID: os,
          Platform: brower,
          Data: [scoped.row.Device_ID]
        }
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/device/devicemgrweb.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          if (state === 0) {
            this.tableData[scoped.row.num - 1].BindState = 1
          }
          if (state === 1) {
            this.tableData[scoped.row.num - 1].BindState = 0
          }
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 冻结解冻
    prohibitData (scoped) {
      var state = scoped.row.State
      var MethodTxt = ''
      if (state === 0) {
        MethodTxt = 'FreezeMember'
      } else if (state === 1) {
        MethodTxt = 'UnFreezeMember'
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: MethodTxt,
        Name: username,
        Password: password,
        Data: [scoped.row.Name],
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          if (state === 0) {
            this.tableData[scoped.row.num - 1].State = 1
          } else if (state === 1) {
            this.tableData[scoped.row.num - 1].State = 0
          }
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 删除数据
    deleteData (scoped) {
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'RemoveMemberWeb',
        Name: username,
        Password: password,
        Data: [scoped.row.Name],
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 处理表格数据
    dataFilter (data) {
      return data.filter(
        (e, i) => i >= (this.page - 1) * this.size && i < this.page * this.size
      )
    },
    // 每页显示条数修改
    sizeChange (size) {
      this.size = size
    },
    // 切换分页
    currentChange (page) {
      this.page = page
    },

    // 强电配置---------------------------------------------------------------------------------------------------
    addStrongData () {
      if (this.allChicket.length < 1) {
        this.$message.error('请选择一个在线的设备')
        return false
      }
      this.allChicketList = this.allChicket
      this.dialogFormVisible = true
    },
    addFeebleData () {
      if (this.allChicket.length < 1) {
        this.$message.error('请选择一个在线的设备')
        return false
      }
      this.allChicketList = this.allChicket
      this.dialogFormVisible2 = true
    },
    addData () {
      this.dialogFormVisible3 = true
    },
    // 取消修改
    cancel () {
      this.dialogFormVisible = false
      this.dialogFormVisible2 = false
      this.dialogFormVisible3 = false
    }
  },
  mounted () {
    this.init()
  },
  components: {
    StrongElectricity,
    FeebleElectricity
  }
}
</script>
<style scoped>
.ManagementPage {
  width: 100%;
  min-height: 100%;
  background: #003a62;
  padding: 20px;
  box-sizing: border-box;
}
.title {
  margin-bottom: 30px;
}
.userInfo {
  position: relative;
  width: 550px;
  padding: 35px;
}
</style>
